<template>
	<view class="">
		<view class="show" v-if="list.length>0">
			<view v-for="(item, index) in list" :key="index">
				<text>{{ item.cname }}</text>
				<view style="display: flex;">
					<u-switch v-model="item.sort" activeColor="#FE3430" size="48" @change="setTop($event, item.cid)">
					</u-switch>
					<text style="margin-right: 40rpx;">置顶</text>
					<u-switch v-model="item.stt" activeColor="#FE3430" size="48" @change="change($event, item.id)">
					</u-switch>{{item.stt?'显示':"隐藏"}}
				</view>
			</view>
		</view>
		<view v-else><u-divider textSize="34" text="暂无数据"></u-divider></view>
		<!-- <view style="margin: auto; width: 100%; text-align: center;margin-top: 50rpx;" v-else>~ 暂无数据 ~</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			};
		},

		methods: {
			async setTop(e,id){
				let sort = e?1:99
				let data = await this.$api.customerSetTopApi({data:{
							  cid:id,
							  sort
				}})
				uni.showToast({
				  title: data.message,
				  icon: "none",
				});
				console.log(data);
			},
			change(e, id) {
				// console.log(e);
				this.$api
					.customerChangeSttApi({
						id,
						stt: e ? "0" : "1"
					})
					.then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: "none",
							});
						}
					});
			},
		},
		onShow() {
			this.$api
				.customerListApi({
					data: {
						pageNo: 1,
						pageSize: 999
					}
				})
				.then((res) => {
					if (res.code == 200) {
						this.list = res.result.list.map((item) => {
							return {
								...item,
								stt: item.stt == "0" ? true : false,
								sort: item.sort == "1" ? true : false,
							};
						});
					}
				});
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
		height: 100vh;
	}

	.show {
		view:not(.u-switch) {
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #bdbdbd;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx 0 10rpx;
		}
	}
</style>
